<template>
  <div>
    <Container>
      <el-row>
        <el-col class="input-header" :span="3"
          ><el-input
            @input="inputChange"
            v-model="page.username"
            placeholder="根据用户名搜索"
        /></el-col>
        <el-button @click="handleClear">清空</el-button>
        <el-button @click="handleSearch" type="primary">搜索</el-button>
        <el-button
          @click="handleAdd"
          class="add-btn"
          icon="el-icon-edit"
          type="success"
          >新增用户</el-button
        >
      </el-row>
      <el-alert
        :closable="false"
        :title="`共${count}条记录`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column align="center" prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column align="center" prop="email" label="邮箱">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column align="center" prop="username" label="用户名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="permission_group_title"
          label="权限组名称"
        >
        </el-table-column>
        <el-table-column align="center" prop="role" label="角色">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              icon="el-icon-edit"
              circle
              plain
              size="medium"
              type="primary"
              @click="handleEdit(row)"
            ></el-button>
            <el-button
              v-if="row.id !== 2"
              icon="el-icon-delete"
              circle
              plain
              size="medium"
              type="danger"
              @click="handleDelete(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="count"
      >
      </el-pagination>
      <UserAdd @getList="getList" :isAdd="true" :isShow.sync="isShowAdd" />
      <UserAdd @getList="getList" :isShow.sync="isShowEdit" :user="user" />
    </Container>
  </div>
</template>

<script>
import { listUsers, remove } from '@/api/base/users.js'
import UserAdd from '../components/UserAdd.vue'
export default {
  name: 'Users',
  components: {
    UserAdd
  },
  data () {
    return {
      user: {},
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        disabled: 1,
        username: ''
      },
      count: 0,
      isShowAdd: false,
      isShowEdit: false,
      loading: true
    }
  },

  created () {
    this.getList()
  },

  methods: {
    // 搜索用户功能
    async handleSearch () {
      this.getList()
    },
    // 点击清空
    handleClear () {
      this.page.username = ''
      this.getList()
    },
    inputChange (value) {
      if (value === '') {
        this.getList()
      }
    },
    // 添加用户功能
    handleAdd () {
      this.isShowAdd = true
    },
    // 获取用户列表
    async getList () {
      this.loading = true
      try {
        const { data } = await listUsers(this.page)
        this.count = data.counts
        this.list = data.list
        this.page.page = data.page * 1
        this.page.pagesize = data.pagesize * 1
        this.count = data.counts * 1
      } catch (e) {
        this.$message.error('获取用户列表失败')
      }
      this.loading = false
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 编辑功能
    handleEdit (user) {
      this.isShowEdit = true
      this.user = user
    },
    async handleDelete (id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await remove({ id })
        this.getList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.input-header {
  margin-right: 10px;
}
.add-btn {
  float: right;
}
::v-deep .el-alert {
  margin: 10px 0 20px;
}
::v-deep .el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
